<template>
	<u-navbar :is-back="true" title-color="#333333" :is-fixed="true" :title="navTitle" :background="navBackground" :border-bottom="false"></u-navbar>
	<view class="u-p-l-28 u-p-r-28 u-p-b-28">
		<template v-for="(v,i) in list">
			<view class="box-radius bgw u-p-28" @click="toDetail(v.article_id)">
				<view class="u-flex">
					<view class="u-font-28 u-flex-1">
						{{v.article_title}}
					</view>
				</view>
				<u-gap height="12"></u-gap>
				<view class="u-font-24 u-tips-color">
					{{v.article_content}}
				</view>
				<u-gap height="12"></u-gap>
				<view class="u-font-22 u-tips-color">
					{{v.created_at}}
				</view>
			</view>
			<u-gap height="32"></u-gap>
		</template>
		<g-loadmore :status="loadmoreStatus"></g-loadmore>
	</view>
	<u-gap height="120"></u-gap>
	<view class="fixed-bottom u-p-20 bgw">
		<view class="u-flex">
			<view class="u-flex-1 u-p-l-10 u-p-r-10">
				<u-button type="primary" :plain="true" class="btn-block" @click="tel">联系平台</u-button>
			</view>
			<view class="u-flex-1 u-p-l-10 u-p-r-10">
				<u-button open-type="contact" type="primary" class="btn-block">在线咨询</u-button>
			</view>
		</view>
	</view>
</template>
<script setup>
	import mixinList from '@/common/js/mixinList.js';
	import store from '@/store/index.js'; //需要引入store
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue'
	import {
		onReady,
		onLoad,
		onShow,
		onPageScroll
	} from '@dcloudio/uni-app'
	const {
	  proxy,
	} = getCurrentInstance()
	const {
		nav,
		navLogin
	} = proxy.$util;
	const props = defineProps({
		id: {
			type: [String,Number],
			default: '',
		},
		title:{
			type: String,
			default: '',
		}
	})
	const {
		total,
		current_page,
		page_size,
		last_page,
		apiPath,
		loading,
		list,
		searchParams,
		getList,
		getNextList,
		loadmoreStatus,
		searchClear,
		searchConfirm
	} = mixinList();
	apiPath.value = 'articleIndex'
	searchParams.article_category_id = props.id
	const navTitle = ref('文章列表');
	if(props.title){
		navTitle.value = props.title
	}
	const toDetail = (id) =>{
		nav('/pagesSub/articleDetail/articleDetail',{
			id:id
		});	
	}
	const telNumber = ref();
	const tel = () =>{
		uni.makePhoneCall({
			phoneNumber:telNumber.value
		});
	}
	onLoad((d) => {
		getList(1)
		proxy.$u.api.commonServiceTel().then(res => {
			let {
				data,
				code,
				msg
			} = res;
			if (code == 200) {
				telNumber.value = data;
			}else {
				uni.$u.toast(msg || '错误');
			}
		})
	})
	const navBackground = reactive({
		background:'none'
	});
	onPageScroll(e => {
		let height = uni.upx2px(80);
		if (e.scrollTop > height) {
			navBackground.background = '#FFFFFF'
		} else {
			navBackground.background = 'none'
		}
	})
</script>

<style>
	page {
		background: linear-gradient(189deg, #CBE8FF 0%, #F9F9F9 30%, #F9F9F9 100%);
	}
</style>
<style lang="scss" scoped>
	page {
		background: linear-gradient(189deg, #CBE8FF 0%, #F9F9F9 30%, #F9F9F9 100%);
	}

</style>